<template>
  <div class="bg-white">
    <Card>
      <Row>
        <Col span="22">
          <SearchForm @get="handleSearch"></SearchForm>
        </Col>
        <Col span="2">
          <div class="btn-wrapper">
            <Button class="editable-add-btn" type="dashed" @click="handleAdd"
              ><template #icon><PlusOutlined /></template>添加用户组</Button
            >
          </div>
        </Col>
      </Row>
      <br />
      <Table
        sticky
        :bordered="true"
        :dataSource="dataSource"
        :columns="userGroupColumns"
        :pagination="false"
        :loading="loading"
        :scroll="scroll"
      >
        <template #bodyCell="{ column, record }">
          <template v-if="column.dataIndex === 'action'">
            <a @click="edit(record)" :disabled="record.policyName == '超级管理员策略'">编辑</a>
            <Divider type="vertical" />
            <a @click="view(record)">查看详情</a>
            <Divider type="vertical" />
            <Popconfirm
              v-if="dataSource.length"
              title="是否确认删除？"
              @confirm="onDelete(record)"
              ok-text="确定"
              cancel-text="取消"
            >
              <a>删除</a>
            </Popconfirm>
            <Divider type="vertical" />
            <Dropdown>
              <a class="ant-dropdown-link" @click.prevent>
                <MoreOutlined />
              </a>
              <template #overlay>
                <Menu>
                  <MenuItem>
                    <a @click="manageMember(record)">成员管理</a>
                  </MenuItem>
                  <MenuItem>
                    <a @click="authorize(record)">授权</a>
                  </MenuItem>
                  <MenuItem>
                    <a @click="cancelAuth(record)" :disabled="record.policyName == '超级管理员策略'">取消授权</a>
                  </MenuItem>
                  <MenuItem>
                    <a @click="schedule(record)">排班</a>
                  </MenuItem>
                </Menu>
              </template>
            </Dropdown>
          </template>
        </template>
      </Table>
      <br />
      <Pagination
        show-size-changer
        v-model:current="current"
        v-model:pageSize="pageSize"
        :total="total"
        :show-total="(total) => `共 ${total} 条`"
        @showSizeChange="onShowSizeChange"
      />
    </Card>
    <ManageMem ref="manageMem"></ManageMem>
    <EditView ref="openDrawer" @submitSuccess="getDataSource" />
    <CreateGroup ref="openCreate" @submitSuccess="getDataSource" />
    <AuthDrawer ref="authDrawer" @submitSuccess="getDataSource" />
    <ScheduleDrawer ref="scheduling" />
  </div>
</template>
<script lang="ts" setup>
import { ref, watch } from 'vue';
import { PlusOutlined, MoreOutlined } from '@ant-design/icons-vue';
import {
  Card,
  Table,
  Dropdown,
  MenuItem,
  Menu,
  Button,
  Pagination,
  Row,
  Col,
  Divider,
  Popconfirm,
  message,
} from 'ant-design-vue';
import SearchForm from '/@/views/work-order/userManagement/userGroup/component/SearchForm.vue';
import EditView from '/@/views/work-order/userManagement/userGroup/component/EditView.vue';
import CreateGroup from '/@/views/work-order/userManagement/userGroup/component/CreateGroup.vue';
import AuthDrawer from '/@/views/work-order/userManagement/userGroup/component/AuthDrawer.vue';
import ManageMem from '/@/views/work-order/userManagement/userGroup/component/ManageMem.vue';
import ScheduleDrawer from '/@/views/work-order/userManagement/userGroup/component/ScheduleDrawer.vue';
import { cancelAuthorize, deleteUserGroup } from '/@/api/work-order/userManagement/userGroup/userGroup';
import { userGroupColumns } from './data';
const loading = ref(true);
const scroll = ref<undefined | object>(undefined);
let dataSource = ref();
const policyIdList = ref([]);
let current = ref(1);
const total = ref<number>(0);
const pageSize = ref(10);
let params = {
  current: current.value,
  policyIdList: policyIdList.value,
  size: pageSize.value,
  name: '',
  isScheduled: undefined,
};

// let data = await getUserGroupTable(params);
const getDataSource = async () => {
  try {
    let data = {
      current: 1,
      pages: 10,
      records: [
        {
          createdTime: 'aaaaaaa',
          id: 10,
          name: 'aaaaaaa',
          isScheduled: true,
          lastUpdateTime: 'aaaaaaaaaaaaaa',
          policyName: 'aaaaaaaaaaaa',
          policyId: 10,
          description: '111111111',
        },
      ],
      size: 10,
      total: 10,
    };
    dataSource.value = data.records;
    total.value = data.total;
  } finally {
    loading.value = false;
  }
};
getDataSource();
const onShowSizeChange = (current: number, pageSize: number) => {
  params.size = pageSize;
  params.current = current;
  getDataSource();
};
watch(pageSize, (val) => {
  if (val > 10) {
    scroll.value = { y: 500 };
  } else {
    scroll.value = undefined;
  }
  params.size = pageSize.value;
});
watch(current, () => {
  params.current = current.value;
  getDataSource();
});

const handleSearch = (searchParam) => {
  params = {
    current: current.value,
    size: pageSize.value,
    isScheduled: searchParam.isScheduled,
    name: searchParam.name,
    policyIdList: searchParam.policyIdList,
  };
  getDataSource();
};

const openCreate = ref();
const handleAdd = () => {
  openCreate.value.openCreate();
};

const openDrawer = ref();
const edit = async (record) => {
  openDrawer.value.openEdit(record);
};

const manageMem = ref();
const manageMember = (record) => {
  manageMem.value.openManage(record);
};

const view = (record) => {
  openDrawer.value.openDetail(record);
};

const authDrawer = ref();
const authorize = (record) => {
  authDrawer.value.openAuth(record);
};

const cancelAuth = async (record) => {
  let res = await cancelAuthorize({ groupId: record.id });
  if (res) {
    message.success('取消授权成功');
  }
};

const scheduling = ref();
const schedule = (record) => {
  scheduling.value.openSchedule(record);
};

const onDelete = async (record) => {
  let res = await deleteUserGroup({ groupId: record.id });
  if (res) {
    message.success('删除成功');
  }
  getDataSource();
};
</script>
<style lang="less">
.ant-pagination {
  float: right;
}
.btn-wrapper {
  float: right;
}
</style>
